require.config({
  baseUrl: "./script/",
  paths: {
    // three: 'script/../../../lib/three'
  },
  shim: {
    'script/../../../lib/three': {
      exports: 'THREE'
    }
  }
})

require(['script/../../../lib/three'], function (THREE) {

  init()
  function init () {
    // 渲染器
    const renderer = new THREE.WebGLRenderer();
    renderer.setSize(400, 300);
    document.body.appendChild(renderer.domElement);
    renderer.setClearColor(0x000000);
    const scene = new THREE.Scene()

    // camera
    const camera = new THREE.OrthographicCamera(-5, 5, 3.75, -3.75, 0.1, 100)
    camera.position.set(25, 25, 25);
    camera.lookAt(new THREE.Vector3(0, 0, 0));
    scene.add(camera);

    // draw axes to help you understand the coordinate
    drawAxes(scene);

    const material = new THREE.MeshBasicMaterial({
      color: 0xffff00,
      wireframe: true
    })

    drawCube(scene, material);
    // drawPlane(scene, material);
    // drawSphere(scene, material);
    // drawCircle(scene, material);
    // drawCylinder(scene, material);
    // drawTetra(scene, material);
    // drawOcta(scene, material);
    // drawIcosa(scene, material);
    // drawTorus(scene, material);
    // drawTorusKnot(scene, material);

    // render
    renderer.render(scene, camera);
  }

  function drawCube (scene, material) {
    const cube = new THREE.Mesh(new THREE.CubeGeometry(1, 2, 3, 2, 2, 3), material)
    scene.add(cube);
  }

  function drawPlane (scene, material) {
    const plane = new THREE.Mesh(new THREE.PlaneGeometry(2, 4), material)
    scene.add(plane);
  }

  function drawSphere (scene, material) {
    const sphere = new THREE.Mesh(new THREE.SphereGeometry(3, 8, 6), material)
    // var sphere = new THREE.Mesh(new THREE.SphereGeometry(3, 8, 6,
    //      0, Math.PI * 2, Math.PI / 6, Math.PI / 2), material);
    // var sphere = new THREE.Mesh(new THREE.SphereGeometry(3, 8, 6,
    //      Math.PI / 2, Math.PI, Math.PI / 6, Math.PI / 2), material);
    // var sphere = new THREE.Mesh(new THREE.SphereGeometry(3, 8, 6,
    //      Math.PI / 6, Math.PI / 3), material);
    // var sphere = new THREE.Mesh(new THREE.SphereGeometry(3, 8, 6,
    //      0, Math.PI * 2, Math.PI / 6, Math.PI / 3), material);
    // var sphere = new THREE.Mesh(new THREE.SphereGeometry(3, 8, 6,
    //      Math.PI / 2, Math.PI, Math.PI / 6, Math.PI / 2), material);
    scene.add(sphere);
  }

  function drawCircle (scene, material) {
    const circle = new THREE.Mesh(new THREE.CircleGeometry(3, 18, Math.PI / 3, Math.PI / 3 * 4), material)
    scene.add(circle);
  }

  function drawCylinder (scene, material) {
    const cylinder = new THREE.Mesh(new THREE.CylinderGeometry(2, 2, 4, 18, 3), material)
    // var cylinder = new THREE.Mesh(new THREE.CylinderGeometry(2, 3, 4, 18, 3), material);
    // var cylinder = new THREE.Mesh(new THREE.CylinderGeometry(2, 3, 4, 18, 3, true), material);
    scene.add(cylinder);
  }

  function drawTetra (scene, material) {
    const tetra = new THREE.Mesh(new THREE.TetrahedronGeometry(3), material)
    scene.add(tetra);
  }

  function drawOcta (scene, material) {
    const octa = new THREE.Mesh(new THREE.OctahedronGeometry(3), material)
    scene.add(octa);
  }

  function drawIcosa (scene, material) {
    const icosa = new THREE.Mesh(new THREE.IcosahedronGeometry(3), material)
    scene.add(icosa);
  }

  function drawTorus (scene, material) {
    const torus = new THREE.Mesh(new THREE.TorusGeometry(3, 1, 4, 8), material)
    // var torus = new THREE.Mesh(new THREE.TorusGeometry(3, 1, 12, 18), material);
    // var torus = new THREE.Mesh(new THREE.TorusGeometry(3, 1, 4, 8, Math.PI / 3 * 2), material);
    scene.add(torus);
  }

  function drawTorusKnot (scene, material) {
    const torus = new THREE.Mesh(new THREE.TorusKnotGeometry(2, 0.5, 32, 8), material)
    scene.add(torus);
  }

  function drawTube (scene, material) {
    const tube = new THREE.Mesh(new THREE.TubeGeometry(1, 0.5), material)
    scene.add(tube);
  }

  function drawAxes (scene) {
    // x-axis
    const xGeo = new THREE.Geometry()
    xGeo.vertices.push(new THREE.Vector3(0, 0, 0));
    xGeo.vertices.push(new THREE.Vector3(3, 0, 0));
    const xMat = new THREE.LineBasicMaterial({
      color: 0xff0000
    })
    const xAxis = new THREE.Line(xGeo, xMat)
    scene.add(xAxis);

    // y-axis
    const yGeo = new THREE.Geometry()
    yGeo.vertices.push(new THREE.Vector3(0, 0, 0));
    yGeo.vertices.push(new THREE.Vector3(0, 3, 0));
    const yMat = new THREE.LineBasicMaterial({
      color: 0x00ff00
    })
    const yAxis = new THREE.Line(yGeo, yMat)
    scene.add(yAxis);

    // z-axis
    const zGeo = new THREE.Geometry()
    zGeo.vertices.push(new THREE.Vector3(0, 0, 0));
    zGeo.vertices.push(new THREE.Vector3(0, 0, 3));
    const zMat = new THREE.LineBasicMaterial({
      color: 0x00ccff
    })
    const zAxis = new THREE.Line(zGeo, zMat)
    scene.add(zAxis);
  }
})